<template>
  <div class="menu-wrap">
    <el-dropdown trigger="click">
      <el-button text type="primary">新建连接</el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="handLoaclConn">本地连接</el-dropdown-item>
          <el-dropdown-item v-for="item in hostList" :key="item.id" @click="handleSSH(item)">
            {{ item.host }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <el-button text type="primary" @click="handleAddHost">添加主机</el-button>
    <el-button text type="primary" @click="handleHost">主机列表</el-button>
    <el-button text type="primary">设置</el-button>

    <el-drawer v-model="drawer" :direction="direction" :with-header="false" size="380">
      <el-table :data="hostList">
        <el-table-column property="host" label="主机" width="200" />
        <el-table-column fixed="right" label="操作" width="140">
          <template #default="scope">
            <el-button link type="danger" size="small" @click="handleDelHost(scope.row.id)">
              删除
            </el-button>
            <el-button link type="primary" size="small" @click="handleEditHost(scope.row)">
              修改
            </el-button>
            <el-button link type="success" size="small" @click="handleSSH(scope.row)">
              连接
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-drawer>

    <el-dialog
      v-model="dialogFlag"
      title="添加主机"
      width="500"
      draggable
      :before-close="handleClose"
    >
      <el-form :model="form">
        <el-form-item label="host" :label-width="formLabelWidth">
          <el-input v-model="form.host" autocomplete="off" clearable />
        </el-form-item>
        <el-form-item label="port" :label-width="formLabelWidth">
          <el-input v-model="form.port" autocomplete="off" clearable />
        </el-form-item>
        <el-form-item label="username" :label-width="formLabelWidth">
          <el-input v-model="form.username" autocomplete="off" clearable />
        </el-form-item>
        <el-form-item label="password" :label-width="formLabelWidth">
          <el-input v-model="form.password" autocomplete="off" type="password" show-password />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="handleConfirm">确定</el-button>
        </div>
      </template>
    </el-dialog>

    <el-dialog
      v-model="dialogEditFlag"
      title="修改主机"
      width="500"
      draggable
      :before-close="handleEditClose"
    >
      <el-form :model="formEdit">
        <el-form-item label="host" :label-width="formLabelWidth">
          <el-input v-model="formEdit.host" autocomplete="off" clearable />
        </el-form-item>
        <el-form-item label="port" :label-width="formLabelWidth">
          <el-input v-model="formEdit.port" autocomplete="off" clearable />
        </el-form-item>
        <el-form-item label="username" :label-width="formLabelWidth">
          <el-input v-model="formEdit.username" autocomplete="off" clearable />
        </el-form-item>
        <el-form-item label="password" :label-width="formLabelWidth">
          <el-input v-model="formEdit.password" autocomplete="off" type="password" show-password />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleEditClose">取消</el-button>
          <el-button type="primary" @click="handleEditConfirm">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { useTabStore, useHostStore } from '@/stores/tabStore'
import { storeToRefs } from 'pinia'
import { v4 as uuidv4 } from 'uuid'
import { useRouter } from 'vue-router'
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const formLabelWidth = '140px'
const drawer = ref(false)
const dialogFlag = ref(false)
const dialogEditFlag = ref(false)
const form = ref()
const formEdit = ref()
const direction = ref('rtl')
const router = useRouter()
const { tabList, currentTab } = storeToRefs(useTabStore())
const { hostList } = storeToRefs(useHostStore())

const handLoaclConn = () => {
  console.log('handLoaclConn')
  const data = {
    id: uuidv4(),
    name: 'local',
    type: 'local',
    title: '本地连接'
  }
  tabList.value.push(data)
  router.push({ name: data.name, query: { id: data.id } })
  currentTab.value = data.id
}

const handleSSH = (hostData) => {
  const data = {
    id: uuidv4(),
    name: 'ssh',
    type: 'ssh',
    title: hostData.host,
    hostId: hostData.id
  }
  tabList.value.push(data)
  router.push({ name: data.name, query: { id: data.id, hostId: hostData.id } })
  currentTab.value = data.id
  if (drawer.value) {
    drawer.value = false
  }
}

const handleHost = () => {
  drawer.value = true
}

const handleAddHost = () => {
  dialogFlag.value = true
  form.value = {
    id: uuidv4(),
    host: '',
    port: 22,
    username: 'root',
    password: ''
  }
}

const handleClose = () => {
  dialogFlag.value = false
}

const handleEditClose = () => {
  dialogEditFlag.value = false
  formEdit.value = {}
}

const handleConfirm = () => {
  const formData = form.value
  const data = hostList.value.find((i) => i.host === formData.host)
  if (data) {
    ElMessage.error('主机配置已存在')
    return
  }
  hostList.value.push(formData)
  dialogFlag.value = false
}

const handleDelHost = (id) => {
  hostList.value = hostList.value.filter((i) => i.id !== id)
}

const handleEditHost = (data) => {
  formEdit.value = {
    id: data.id,
    host: data.host,
    port: data.port,
    username: data.username,
    password: data.password
  }
  dialogEditFlag.value = true
}

const handleEditConfirm = () => {
  const targetData = formEdit.value
  const data = hostList.value.find((i) => i.id === targetData.id)
  if (data) {
    data.host = targetData.host
    data.port = targetData.port
    data.username = targetData.username
    data.password = targetData.password
  }
  dialogEditFlag.value = false
  formEdit.value = {}
}
</script>

<style lang="less" scoped>
.menu-wrap {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding-right: 15px;
}
</style>
